<template>
  <div>
    <p class="tipView">*总分{{totalScore}}，{{passScore}}分以上合格</p>
    <div class="backView">
      <img class="imgView" :src="result.examResult == 1 ? '/web-hft-ee/static/img/m/pass_test.png' : '/web-hft-ee/static/img/m/nopass_test.png'" />
      <p class="statusLabel">{{result.examResult == 1 ? '通过测试' : '未通过测试'}}</p>
      <div class="timeBack">
        <p class="black14">用时 ：</p>
        <p class="black14 fontBold marginLeft16">{{hour}}</p>
        <p class="grey14 marginLeft2">时</p>
        <p class="black14 fontBold marginLeft2">{{min}}</p>
        <p class="grey14 marginLeft2">分</p>
        <p class="black14 fontBold marginLeft2">{{sec}}</p>
        <p class="grey14 marginLeft2">秒</p>
      </div>
      <div class="countBack" style="margin-top: 36px;">
        <p class="black14">得分 ：</p>
        <p class="countLabel">{{result.ext1}}</p>
        <p class="grey14 marginLeft8">分</p>
      </div>
      <div class="countBack" style="margin-top: 24px;">
        <p class="black14">答对 ：</p>
        <p class="countLabel">{{rightCount}}</p>
        <p class="grey14 marginLeft8">题</p>
      </div>
      <div class="countBack" style="margin-top: 24px;">
        <p class="black14">答错 ：</p>
        <p class="countLabel">{{wrongCount}}</p>
        <p class="grey14 marginLeft8">题</p>
      </div>

      <div class="againBtn" @click="againClick">
        再次答题
      </div>
    </div>


  </div>

</template>

<script>
  export default {
    props: ['result', 'testList', 'passScore'],

    computed: {
      time() {
        return this.result.ext2 || 0
      },
      hour() {
        return Math.floor(this.time / 3600)
      },
      min() {
        return Math.floor((this.time % 3600) / 60)
      },
      sec() {
        return this.time % 60
      },
      rightCount() {
        var count = 0
        this.result.resultLogs.map((item) => {
          if (item.userScore > 0) {
            count++
          }
        })
        return count
      },
      wrongCount() {
        var count = 0
        this.result.resultLogs.map((item) => {
          if (!(item.userScore > 0)) {
            count++
          }
        })
        return count
      },
      totalScore() {
        let score = 0
        this.testList.forEach((e) => {
          score += e.score
        })
        return score
      }
    },
    methods: {
      againClick() {
        this.$emit('sendAgainClick');

      }
    }
  }
</script>

<style scoped>
  .backView {
    top: 12%;
    width: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .tipView {
    width: 100%;
    height: 32px;
    text-align: center;
    line-height: 32px;
    background-color: #FDDAD8;
    color: #FF3328;
    font-size: 12px;
  }
  .imgView {
    width: 62px;
    height: 62px;
  }

  .statusLabel {
    margin-top: 12px;
    font-size: 20px;
    font-weight: bold;
    color: #333333;
  }

  .timeBack {
    display: flex;
    flex-direction: row;
    margin-top: 12px;
    align-items: center;
  }

  .black14 {
    font-size: 14px;
    color: #333333;
  }

  .grey14 {
    font-size: 14px;
    color: #999999;
  }
  .fontBold {
    font-weight: bold;
  }
  .marginLeft2 {
    margin-left: 2px;
  }

  .marginLeft8 {
    margin-left: 8px;
  }

  .marginLeft16 {
    margin-left: 16px;
  }

  .countBack {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .countLabel {
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    width: 48px;
    text-align: end;
  }

  .againBtn {

    margin-top: 56px;
    width: 160px;
    height: 48px;
    background-color: #1286F7;
    border-radius: 4px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    line-height: 48px;
    text-align: center;
  }
</style>
